import { Component, ViewChild, ComponentFactoryResolver, Input, OnInit, ViewContainerRef, SimpleChanges } from '@angular/core';

import { EventService } from 'src/app/shared/service/event.service';
import { TabsService } from 'src/app/shared/service/tabs.service';

import { ComItem } from './../com-item';

@Component({
    selector: 'app-search',
    template: '<section>\n' +
        '<ng-template appSubAnchor #dynamicComponent></ng-template>\n' +
        '</section>'
})

export class SearchcomsComponent implements OnInit { // slide缓存
    @Input() subComs: ComItem[];
    @ViewChild('dynamicComponent', { read: ViewContainerRef }) myRef: ViewContainerRef;
    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private eventService: EventService,
        public tabService: TabsService) {
    }
    ngOnInit() {
        // this.eventService.eventEmit.on('refreshSubTabContainer', () => {
        //     this.refreshComponent();
        // });
    }
    // tslint:disable-next-line:use-life-cycle-interface
    ngOnChanges(changes: SimpleChanges): void {
        this.myRef.clear();
        this.loadComponent();
    }
    // refreshComponent() {
    //     const storeTagData = JSON.parse(localStorage.getItem("dataMapSubContainer"));
    //     if (storeTagData !== undefined && storeTagData !== null) {
    //         this.subComs = [];
    //         setTimeout(() => {
    //             // const style = storeTagData.style;
    //             const cDataObj = storeTagData.currentData;
    //             const tags = cDataObj.tags;
    //             if (tags !== undefined && tags.length > 0) {
    //                 const len = tags.length;
    //                 for (let i = 0; i < len; i++) {
    //                     const tag = tags[i];
    //                     this.tabService.getComsDataByStyle(tag.style, callData => {
    //                         if (callData) {
    //                             this.subComs.push(callData);
    //                         }
    //                     }, tag);
    //                 }
    //             }
    //             localStorage.removeItem("dataMapSubContainer");
    //             if (this.subComs !== undefined) {
    //                 const l = this.subComs.length;
    //                 this.myRef.clear();
    //                 for (let j = 0; j < l; j++) {
    //                     const v = this.subComs[j];
    //                     const factory = this.componentFactoryResolver.resolveComponentFactory(v.component);
    //                     const ref = this.myRef.createComponent(factory);
    //                     ref.instance.tagData = v.tagData;
    //                     ref.changeDetectorRef.detectChanges();
    //                 }
    //             }
    //         }, 50);
    //     }
    // }
    loadComponent() {
        this.myRef.clear();
        const len = this.subComs.length;
        for (let i = 0; i < len; i++) {
            const v = this.subComs[i];
            const factory = this.componentFactoryResolver.resolveComponentFactory(v.component);
            const ref = this.myRef.createComponent(factory);
            ref.instance.tagData = v.tagData;
        }
    }
}
